<template>
    <div>
        <div class="banner" @click="handleGallery">
            <img class="banner-img" :src="bannerImg" alt="">
            <div class="banner-info">
                <p>{{this.sightName}}</p>
            </div>
            <div class="banner-number">
                <span class="iconfont">&#xe692;</span> {{this.gallaryImgs.length}}
            </div>
        </div>
        <common-animation>
            <common-gallery :gallaryImgs="gallaryImgs" v-show="showGallery" @close="handleGalleryClose"></common-gallery>
        </common-animation>
    </div>
</template>
<script>
import CommonGallery from 'common/gallery/Gallery'
import CommonAnimation from 'common/animation/animation'
export default {
  name: 'DetailBanner',
  components: {
    CommonGallery,
    CommonAnimation
  },
  props: {
    sightName: String,
    bannerImg: String,
    gallaryImgs: Array
  },
  data () {
    return {
      showGallery: false
    }
  },
  methods: {
    handleGallery () {
      this.showGallery = true
    },
    handleGalleryClose () {
      this.showGallery = false
    }
  }
}
</script>

<style lang="stylus" scoped>
.banner {
    overflow: hidden;
    height: 0;
    padding-bottom: 55%;
    color: #fff;
    position: relative;

    .banner-img {
        width: 100%;
    }

    .banner-info {
        position: absolute;
        bottom: 5px;
        left: 10px;
    }

    .banner-number {
        position: absolute;
        bottom: 5px;
        right: 10px;
    }
}
</style>
